<!--
 * @Description: 编辑秒杀时间
 * @Author: liyujie
 * @Date: 2021/8/20
 * @Last Modified by: liyujie
 * @Last Modified time: 2021/8/20
-->
<template>
    <section class="wrapper">
        <el-dialog
            :visible.sync="dialogVisible"
            width="410px"
            title="编辑秒杀时间"
            :close-on-click-modal="false"
            @close="$emit('close')"
        >
            <el-form
                :model="ruleForm"
                ref="ruleForm"
                :rules="rules"
                class="demo-ruleForm"
                label-width="94px"
            >
                <el-form-item
                    label="开始时间"
                    prop="start_time"
                >
                    <el-time-picker
                        placeholder="起始时间"
                        v-model="ruleForm.start_time"
                        size="small"
                        value-format="HH:mm:ss"
                    />
                </el-form-item>
                <el-form-item
                    label="结束时间"
                    prop="end_time"
                >
                    <el-time-picker
                        placeholder="结束时间"
                        v-model="ruleForm.end_time"
                        size="small"
                        value-format="HH:mm:ss"
                        :picker-options="{
                            minTime: ruleForm.start_time
                        }"
                    />
                </el-form-item>
                <div class="dialog-footer">
                    <el-button
                        type="primary"
                        size="small"
                        style="width: 100px"
                        :loading="loading"
                        @click="handleSubmit()"
                    >
                        保存
                    </el-button>
                </div>
            </el-form>
        </el-dialog>
    </section>
</template>

<script>
import Vue from "vue";

const Dialog = {
    name: "EditSeckillTime",
    props: {
        dayTime: {
            type: Number,
            default: 0
        },
        timeNo: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            dialogVisible: false,
            loading: false,
            ruleForm: {
                startTime: '',
                endTime: ''
            },
            rules: {
                start_time: [
                    {required: true, message: '请选择时间,不可以为空', trigger: 'blur'}
                ],
                end_time: [
                    {required: true, message: '请选择时间,不可以为空', trigger: 'blur'}
                ]
            },
        };
    },
    mounted() {

    },
    methods: {

        /**
         * 显示弹窗
         */
        show() {
            this.dialogVisible = true;
        },

        /**
         * 显示弹窗
         */
        close() {
            this.dialogVisible = false;
        },

        /**
         * 关闭弹窗前
         */
        beforeClose() {
            this.ruleForm.startTime = '';
            this.ruleForm.endTime = '';
            this.$emit('close');
        },

        /**
         * 选择秒杀时间
         */
        handleSubmit() {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    this.loading = true;
                    let day_time = this.$moment(this.dayTime * 1000).format('YYYY-MM-DD');
                    let start_time = this.$moment(`${day_time} ${this.ruleForm.start_time}`).format('x');
                    let end_time = this.$moment(`${day_time} ${this.ruleForm.end_time}`).format('x');

                    this.$post('/student/shop_goods_flash_sale%5Cset_time', {
                        time_no: this.timeNo,
                        start_time: start_time / 1000,
                        end_time: end_time / 1000,
                    }, resp => {
                        if (resp.code === 1) {
                            this.$notify({
                                title: '提示',
                                message: '操作成功',
                                duration: 2000,
                                type: 'success'
                            });
                            this.$emit('confirm', true);
                        } else {
                            this.$notify({
                                title: '提示',
                                message: resp.msg,
                                duration: 2000,
                                type: 'warning'
                            });
                        }
                        this.loading = false;
                    });
                }
            });
        },
    }
};

export default Dialog;

const editSeckillTimeDialog = function (config) {
    return new Promise((resolve) => {
        const DialogConstructor = Vue.extend(Dialog);
        const instance = new DialogConstructor({
            propsData: config,
        }).$mount();

        instance.$on("close", function () {
            setTimeout(() => {
                document.body.removeChild(instance.$el);
                instance.$destroy();
            }, 300);
            resolve(false);
        });
        instance.$on("confirm", function (data) {
            instance.close();
            resolve(data);
        });
        document.body.appendChild(instance.$el);
        instance.dialogVisible = true;
    });
};

export { editSeckillTimeDialog };
</script>

<style scoped lang="less">
.dialog-content {

}
.dialog-footer {
    display: flex;
    align-items: center;
    justify-content: center;
}
/deep/ .el-dialog__header {
    padding-top: 10px;
    box-shadow:0 1px 0 0 rgba(233,233,233,1);
    display: flex;
    align-items: center;
    background: #FAFAFA;
    border-radius: 4px 4px 0 0;
    .el-dialog__title {
        font-weight: 500;
        color: #333;
        font-size: 14px;
    }
    .el-icon-close:before {
        color: rgb(194,194,194);
        font-size: 17px;
        font-weight: bold;
    }
    .el-dialog__headerbtn {
        top: 14px;
    }
}
/deep/ .el-dialog__body {
    padding: 24px 32px;
}
</style>
